import { Tooltip } from 'antd';

type TitleNameProp = {
  title: string;
  width?: number;
  desc?: string;
};

export default (props: TitleNameProp) => (
  <div
    style={{
      textAlign: 'left',
      fontSize: '16px',
    }}
  >
    <p
      style={{
        margin: 0,
        color: '#0050b3',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
      }}
    >
      {props.title}
    </p>
    <Tooltip title={props.desc}>
      <p
        style={{
          fontSize: '12px',
          margin: 0,
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          overflow: 'hidden',
          width: props.width || 180,
          color: '#666',
        }}
      >
        {props.desc}
      </p>
    </Tooltip>
  </div>
);
